<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <van-tabbar v-model="active" active-color="#ffd658" class="footer">
    <van-tabbar-item icon="home-o" name="home" to="/home">首页</van-tabbar-item>
    <van-tabbar-item icon="cart-o" :badge="cartStore.totalItemsCount" name="cart" to="/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="notes-o" :badge="orderStore.pendingPaymentListCount" name="order" to="/order">订单</van-tabbar-item>
    <van-tabbar-item icon="user-o" name="mine" to="/mine" dot>我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useCartStore } from '../store/cart';
import { useOrderStore } from '../store/order';
const cartStore = useCartStore()
const orderStore = useOrderStore()
const route = useRoute()

defineOptions({
  name: 'Footer'
})

const active = ref('home')

// 根据当前路由路径设置对应的active值  解决刷新后active值为home的问题
const updateActiveFromRoute = () => {
  const path = route.path
  if (path.includes('/home')) {
    active.value = 'home'
  } else if (path.includes('/cart')) {
    active.value = 'cart'
  } else if (path.includes('/order')) {
    active.value = 'order'
  } else if (path.includes('/mine')) {
    active.value = 'mine'
  }
}

// 监听路由变化
watch(() => route.path, updateActiveFromRoute, { immediate: true })




</script>

<style scoped lang="scss">
.footer {
  height: 50px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.van-tabbar-item {
  font-size: 14px;
}

:deep(.van-icon) {
  font-size: 28px;
}

:deep(.van-badge) {
  font-size: 10px;
}

:deep(.van-badge--dot) {
  width: 6px;
  height: 6px;
}

/* 确保底部导航栏背景色 */
:deep(.van-tabbar) {
  background-color: white;
}
</style>